<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>渲染图片案例</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            li {
                list-style: none;
            }

            .box {
                display: flex;
                flex-wrap: wrap;
                width: 540px;
                margin: 20px auto;
            }

            .box li {
                width: 100px;
                height: 100px;
                margin: 0 10px 10px 0;
            }

            .box li:nth-child(5n + 1) {
                margin-right: 0;
            }

            .box li img {
                width: 100%;
                height: 100%;
                border: 2px solid #258df2;
                border-radius: 10px 0 10px 0;
            }
        </style>
    </head>

    <body>
        <ul class="box">
            <script>
                let num = +prompt("请输入1~20之间的英雄个数：");
                for (let i = 1; i <= num; i++) {
                    document.write(
                        `<li><img src="../images/20241104/${i}.webp" alt="" /></li>`
                    );
                }
            </script>
        </ul>
    </body>
</html>
